import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Input, Form, Button, Row, Col, Spin } from 'antd';

const FormItem = Form.Item;

@connect(({ paper }) => ({

}))
@Form.create()
class PaperTitleForm extends PureComponent {
  state = {
    loading: false
  }

  handleSubmit = (e) => {
    const { form, dispatch, paperTitle } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        values.id = paperTitle.id;
        this.setState({
          loading: true,
        });
        dispatch({
          type: 'paper/setExamPaper',
          payload: values,
          callback: (res) => {
            if (res) {
              this.setState({
                loading: false,
              });
              this.props.callback();
            }
          }
        })
      }
    });
  }

  handleClick = () => {
    this.handleSubmit()
  }

  render() {
    const {
      form: { getFieldDecorator }, paperTitle
    } = this.props;
    const { loading } = this.state;

    return (
      <div>
        <Spin spinning={loading}>
          <Row>
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Col lg={12} offset={6}>
                <FormItem label="标题">
                  {getFieldDecorator('title', {
                    rules: [{required: true,}],
                    initialValue: paperTitle.title
                  })(<Input style={{ width: `200%` }} />)}
                </FormItem>
              </Col>
              <Col lg={2}>
                <FormItem>
                  <Button
                    type="primary"
                    onClick={this.handleClick}
                  >
                    提交
                  </Button>
                </FormItem>
              </Col>
            </Form>
          </Row>
        </Spin>
      </div>
    )
  }
}
export default PaperTitleForm
